import { toRefs, defineComponent } from 'vue';
import { ElPopover, ElRow, ElSwitch, ElButton, ElCheckbox, ElText } from 'element-plus';
import { proTableColumnSwitchProps } from './types';

export default defineComponent({
  name: 'ProTableColumnSwitch',
  props: proTableColumnSwitchProps,
  setup(props, { slots }) {
    // 初始化缓存数据
    const { modelValue } = toRefs(props);
    return () => (
      <ElPopover placement="bottom" trigger="click" width={props.width}>
        {{
          default: () => (
            <div class="max-h-300px overflow-y-auto">
              {modelValue.value?.map((it) => {
                return (
                  <ElRow align="middle" class="gap-2" key={it.label + it.prop + it.type}>
                    <ElSwitch v-model={it.isHidden} activeValue={false} inactiveValue={true} />
                    <span class="max-w-[60%]">
                      <ElText truncated>{it.type === 'selection' ? <ElCheckbox disabled /> : it.label}</ElText>
                    </span>
                  </ElRow>
                );
              })}
            </div>
          ),
          reference: () =>
            slots.default ? slots.default() : <ElButton icon="operation" circle plain class="ml-10px" />,
        }}
      </ElPopover>
    );
  },
});
